@charset "utf-8";
/* reset css start */
audio,canvas,progress,video {
    display:inline-block;
    vertical-align:baseline;
}
audio:not([controls]) {
    display:none;
    height:0;
}
[hidden],template {
    display:none;
}
input {
    border:1px solid #999;
    line-height:normal;
    vertical-align:middle;
    outline:0;
    border-radius:0;
    background:#FFFFFF;
    -webkit-appearance:none;
}
input[type="radio"],input[type="checkbox"] {
    padding:0;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
input[type="number"] {
    -moz-appearance:textfield;
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
    margin:0;
    height:auto;
    -webkit-appearance:none !important;
}
input[type="search"] {
    -webkit-appearance:textfield;
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none;
}
input::-moz-placeholder,textarea::-moz-placeholder {
    font-size:1.4rem;
    color:#c1c1c1;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    font-size:1.4rem;
    color:#c1c1c1;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    font-size:1.4rem;
    color:#c1c1c1;
}
button,input,optgroup,select,textarea {
    margin:0;
    font:inherit;
    color:inherit;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
button {
    border:none;
    overflow:visible;
}
button,select {
    text-transform:none;
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
    -webkit-appearance:none;
    cursor:pointer;
}
button[disabled],html input[disabled] {
    cursor:default;
}
button::-moz-focus-inner,input::-moz-focus-inner {
    border:0;
    padding:0;
}
textarea {
    resize:vertical;
    overflow:auto;
}
textarea:focus {
    outline:none;
}
h1,h2,h3,h4,h5,h6,p,figure,form,blockquote,ul,ol,li,dl,dd,td,th {
    margin:0;
    padding:0;
}
h1,h2,h3,h4,h5,h6 {
    font:inherit;
}
ul,ol {
    list-style:none;
}
em,i {
    font-style:normal;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
label {
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
img {
    max-width:100%;
    height:auto;
    border:0;
    vertical-align:middle;
}
* {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.coupon-wrapper {
    width:100%;
    height:auto;
    padding:5%;
}
.coupon-wrapper .coupon-item {
    width:100%;
}
.coupon-wrapper h3 {
    height:3rem;
    line-height:1.8rem;
    font-size:1.4rem;
    color:#454545;
    padding:2% 0;
}
.coupon-item .nick {
    padding:.66% 0;
    color:#fff;
}
.coupon-item .coupon-money {
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    font-size:1.2rem;
    align-items:center;
}
.coupon-item .coupon-money em {
    font-size:3.8rem;
}
.coupon-item .coupon-money .lay:last-child {
    flex:1;
    padding:0 3%;
    line-height:1.66rem;
}
.style-one,.style-two,.style-three,.style-four,.style-five,.style-six,.style-seven {
    width:100%;
    height:8rem;
    position:relative;
    margin:5% 0;
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#fff;
    border:1px solid #E5004F;
}
.style-one:after,.style-three .get-btn:after {
    content:"";
    width:1.2rem;
    position:absolute;
    top:0;
    bottom:0;
    right:23.9%;
    display:block;
    z-index:9;
    background-color:#fff;
    background-position:100% 35%;
    background-size:2rem .66rem;
    background-image:linear-gradient(-45deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-135deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#e5004f 75%),linear-gradient(-135deg,transparent 75%,#e5004f 75%);
}
.style-one .info-box,.style-two .info-box,.style-three .info-box,.style-four .info-box,.style-five .info-box,.style-six .info-box,.style-seven .info-box {
    -webkit-box:1;
    -webkit-flex:1;
    flex:1;
    padding:0 3% 0 10%;
    position:relative;
}
.style-one .info-box:before,.style-one .info-box:after,.style-one .get-btn:before,.style-one .get-btn:after,.style-two .info-box:before,.style-two .info-box:after,.style-two .get-btn:before,.style-two .get-btn:after {
    content:"";
    width:1.4rem;
    height:2rem;
    position:absolute;
    z-index:9;
    border-width:1px;
    border-style:solid;
    border-color:transparent #E5004F transparent transparent;
    -webkit-border-radius:50%;
    border-radius:50%;
    background-color:#f5f5f5;
}
.style-one .info-box:before,.style-two .info-box:before {
    top:-1.8rem;
    left:-.5rem;
    -webkit-transform:rotate(43deg);
    transform:rotate(43deg);
}
.style-one .info-box:after,.style-two .info-box:after {
    bottom:-1.8rem;
    left:-.5rem;
    -webkit-transform:rotate(-43deg);
    transform:rotate(-43deg);
}
.style-one .get-btn:before,.style-two .get-btn:before {
    top:-.8rem;
    right:-.35rem;
    -webkit-transform:rotate(143deg);
    transform:rotate(143deg);
    border-color:transparent;
}
.style-one .get-btn:after,.style-two .get-btn:after {
    bottom:-.8rem;
    right:-.35rem;
    -webkit-transform:rotate(-143deg);
    transform:rotate(-143deg);
    border-color:transparent;
}
.style-one .get-btn,.style-two .get-btn,.style-three .get-btn,.style-four .get-btn,.style-six .get-btn,.style-seven .get-btn {
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
    width:24%;
    height:8rem;
    text-align:center;
    color:#fff;
    font-size:1.5rem;
    line-height:1.35;
    background-color:#E5004F;
    position:relative;
}
.style-one .get-btn span {
    width:1.6rem;
    padding:.66rem 2rem .66rem 0;
    display:inherit;
    margin:0 auto;
    word-break:break-all;
}
.style-one .nick,.style-four .nick {
    color:#c1c1c1;
}
.style-one .of,.style-one .lay .tit,.style-four .of,.style-four .lay .tit,.style-six .nick {
    color:#E5004F;
}
.style-one .lay .demand,.style-four .lay .demand {
    color:#454545;
}
.style-two {
    background-color:#ED008C;
    border:1px solid #ED008C;
    color:#fff;
}
.style-two:before,.style-two:after {
    content:"";
    height:.5rem;
    position:absolute;
    display:block;
    z-index:9;
    background-image:linear-gradient(-45deg,#ED008C 25%,transparent 25%,transparent),linear-gradient(-135deg,#ED008C 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#ED008C 75%),linear-gradient(-135deg,transparent 75%,#ED008C 75%);
    background-size:1rem 1rem;
    background-repeat:repeat-x,repeat-x;
}
.style-two:before {
    top:-.4rem;
    left:.5rem;
    right:.5rem;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
.style-two:after {
    bottom:-.36rem;
    left:1.2rem;
    right:1.38rem;
}
.style-two .info-box:before,.style-two .info-box:after {
    border-color:transparent;
}
.style-two .get-btn {
    background-color:#ed008c;
}
.style-two .get-btn span,.style-three .get-btn span,.style-six .get-btn span,.style-seven .get-btn span {
    width:4rem;
    font-size:1.8rem;
    word-break:break-all;
}
.style-two .of {
    color:#FFF100;
}
.style-three {
    background-color:#378AE8;
    border:none;
    color:#fff;
}
.style-three:before {
    content:"";
    position:absolute;
    left:-.66rem;
    width:2.4rem;
    height:2.8rem;
    top:50%;
    -webkit-transform:translate(-30%,-50%);
    transform:translate(-30%,-50%);
    -webkit-box-shadow:3px 0 0 #aeadad;
    box-shadow:3px 0 0 #aeadad;
    -webkit-border-radius:80%;
    border-radius:80%;
    background-color:#f5f5f5;
}
.style-three .get-btn {
    width:34%;
    background-color:#fff;
}
.style-three .get-btn:after {
    left:0;
    background-image:linear-gradient(-45deg,#ffffff 25%,#378ae8 25%,#378ae8)
}
.style-six .get-btn,.style-seven .get-btn {
    width:28%;
    background-color:#fff;
}
.style-three .get-btn span,.style-six .get-btn span {
    color:#378AE8;
}
.style-three .get-btn span:after,.style-six .get-btn span:after {
    content:"V";
    font-size:1.6rem;
    display:block;
}
.style-four {
    background-color:#fff;
    -webkit-border-radius:1rem;
    border-radius:1rem;
    border:1px dashed #e5004f;
}
.style-four .get-btn {
    width:30%;
    height:7rem;
    background-color:#fff;
    text-align:center;
}
.style-four .get-btn span {
    display:block;
    padding:2.66rem 0;
    font-size:1.5rem;
    word-break:break-all;
    color:#454545;
}
.style-five {
    background-color:#E5004F;
    -webkit-border-radius:1rem;
    border-radius:1rem;
    border:none;
    color:#fff;
}
.style-five .get-btn {
    width:28%;
    height:7rem;
    position:relative;
    -webkit-perspective:180;
    perspective:180;
}
.style-five .get-btn:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#F8B551;
    transform:rotateY(-28deg);
    z-index:1;
    -webkit-border-radius:.66rem;
    border-radius:.66rem;
    -webkit-box-shadow:-3px 0 8px #793030;
    box-shadow:-3px 0 8px #793030;
}
.style-five .get-btn span {
    width:4rem;
    word-break:break-all;
    font-size:1.8rem;
    color:#454545;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-30%,-50%);
    transform:translate(-30%,-50%);
    z-index:3;
}
.style-six {
    background-color:#F7DBCD;
    color:#E5004F;
    border:none;
}
.style-six:after,.style-six:before {
    content:"";
    height:.5rem;
    position:absolute;
    left:0;
    right:0;
    display:block;
    z-index:9;
    background-image:linear-gradient(-45deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-135deg,#f5f5f5 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#f5f5f5 75%),linear-gradient(-135deg,transparent 75%,#f5f5f5 75%);
    background-size:1rem 1rem;
    background-repeat:repeat-x,repeat-x;
}
.style-six:after {
    top:-.12rem;
}
.style-six:before {
    bottom:-.12rem;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
.style-six .get-btn span {
    color:#E5004F;
}
.style-seven {
    background-color:#F3B502;
    color:#fff;
    border:none;
}
.style-seven:before,.style-seven:after {
    content:"";
    position:absolute;
    width:2rem;
    height:6rem;
    -webkit-border-radius:50%;
    border-radius:50%;
    background-color:#f5f5f5;
    top:50%;
    -webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
}
.style-seven:before {
    left:-1rem;
    -webkit-box-shadow:2px 0 0 #c6c6c6;
    box-shadow:2px 0 0 #c6c6c6;
}
.style-seven:after {
    right:-1rem;
    -webkit-box-shadow:-2px 0 0 #c6c6c6;
    box-shadow:-2px 0 0 #c6c6c6;
}
.style-seven .get-btn {
    background-color:#000000;
    padding-right:.88rem;
}
/* 已领取 */
.style-one.have {
    border:1px solid #ddd;
    color:#C1C1C1;
    color:#C1C1C1;
}
.style-one.have .info-box:before,.style-one.have .info-box:after,.style-two.have .info-box:before,.style-two.have .info-box:after {
    border-right:1px solid #c1c1c1;
}
.style-one.have .of,.style-one.have .tit,.style-one.have .demand,.style-four.have .of,.style-four.have .tit,.style-four.have .demand {
    color:#c1c1c1;
}
.style-one.have .get-btn {
    background-color:#c1c1c1;
}
.style-one.have .get-btn span {
    color:#fff;
}
.style-one.have .get-btn:before,.style-one.have .get-btn:after,.style-two.have .get-btn:before,.style-two.have .get-btn:after {
    border-color:transparent;
}
.style-one.have:after {
    background-image:linear-gradient(-45deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-135deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#c1c1c1 75%),linear-gradient(-135deg,transparent 75%,#c1c1c1 75%);
}
.style-two.have,.style-three.have {
    background-color:#c1c1c1;
    border:none;
}
.style-two.have .of {
    color:#fff;
}
.style-two.have:before,.style-two.have:after {
    background-image:linear-gradient(-45deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-135deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#c1c1c1 75%),linear-gradient(-135deg,transparent 75%,#c1c1c1 75%);
}
.style-two.have .get-btn {
    background-color:#c1c1c1;
}
.style-two.have .get-btn span,.style-three.have .get-btn span,.style-six.have .get-btn span,.style-seven.have .get-btn span {
    width:1.6rem;
    padding:1.36rem 0;
    font-size:1.6rem;
}
.style-three.have .get-btn:after {
    background-image:linear-gradient(-45deg,#ffffff 25%,#c1c1c1 25%,#c1c1c1);
}
.style-three.have .get-btn span,.style-four.have .get-btn span,.style-six.have .get-btn span {
    color:#767676;
    font-size:1.6rem;
}
.style-three.have .get-btn span:after,.style-six.have .get-btn span:after {
    content:"";
}
.style-four.have {
    border:1px dashed #C1C1C1;
}
.style-five.have,.style-five.have .get-btn:after,.style-six.have,.style-seven.have {
    background-color:#c1c1c1;
}
.style-five.have .get-btn:after {
    -webkit-box-shadow:-3px 0 8px #8c8c8c;
    box-shadow:-3px 0 8px #8c8c8c;
}
.style-five.have .get-btn span {
    width:5rem;
    font-size:1.5rem;
    color:#fff;
}
.style-six.have .nick,.style-six.have .of,.style-six.have .tit,.style-six.have .demand {
    color:#fff;
}
.style-six.have span,.style-seven.have span {
    font-size:1.6rem;
    color:rgba(189,189,189,1);
}
